<template>
  <div>
    <div class="box">
      <a-form-model
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        v-bind="layout"
      >
        <a-form-model-item has-feedback label="用户名" prop="name">
          <a-input
            v-model="ruleForm.name"
            autocomplete="off"
            placeholder="请输入用户名"
          >
          </a-input>
        </a-form-model-item>
        <a-form-model-item has-feedback label="账号" prop="account">
          <a-input
            v-model="ruleForm.account"
            autocomplete="off"
            placeholder="请设置账号"
          >
          </a-input>
        </a-form-model-item>
        <a-form-model-item has-feedback label="密码" prop="password">
          <a-input-password placeholder="请输入密码" v-model="ruleForm.password">
          </a-input-password>
        </a-form-model-item>
        <a-form-model-item has-feedback label="再次输入密码" prop="chpass">
          <a-input-password
            placeholder="请再次输入密码"
            v-model="ruleForm.chpass"
          >
          </a-input-password>
        </a-form-model-item>
        <a-form-model-item has-feedback label="性别" prop="sex">
          <a-radio-group v-model="ruleForm.sex">
            <a-radio :value="0"> 男 </a-radio>
            <a-radio :value="1"> 女 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item has-feedback label="年龄" prop="age">
          <a-input-number v-model="ruleForm.age" :min="1" :max="150" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="手机号" prop="phone">
          <a-input
            v-model="ruleForm.phone"
            autocomplete="off"
            placeholder="请输入手机号"
          >
          </a-input>
        </a-form-model-item>
        <a-form-model-item has-feedback label="科任名称" prop="curriculum">
          <a-select v-model="ruleForm.curriculum">
            <a-select-option value="jack"> Jack </a-select-option>
            <a-select-option value="lucy"> Lucy </a-select-option>
            <a-select-option value="Yiminghe"> yiminghe </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item has-feedback label="验证码" prop="key">
          <a-row>
            <a-col :span="12">
              <a-input
                v-model="ruleForm.key"
                autocomplete="off"
                :placeholder="this.key_placeholder"
              >
              </a-input>
            </a-col>
            <a-col :span="12">
              <a-button
                type="Default"
                @click="daojishi()"
                v-show="this.button_type"
              >
                获取验证码
              </a-button>
              <a-button type="Default" disabled v-show="!this.button_type">
                获取验证码
              </a-button>
            </a-col>
          </a-row>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 15, offset: 5 }">
          <a-button
            type="primary"
            @click="submitForm('ruleForm')"
            block
            id="login_button"
          >
            注册
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { teacherRegister } from "@/utils/api.js"
export default {
  name: "teacherRe",
  components: {},
  data() {
    // 密码校验
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入你的密码"));
      } else if (
        !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
          value
        )
      ) {
        callback(
          new Error(
            "请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种"
          )
        );
      } else {
        callback();
      }
    };
    // 二次密码校验
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("校验密码不能为空！"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次密码不一致！"));
      } else {
        callback();
      }
    };
    // 账号验证
    let validateAccount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入你的账号"));
      } else if (!/^[0-9]{3,15}$/.test(value)) {
        callback(new Error("请输入3到15位数字"));
      } else {
        callback();
      }
    };
    // 手机号码验证
    let validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入你的手机号"));
      } else if (/^1[3456789]\d{9}$/.test(value) == false) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    // 验证码校验
    let validateKey = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        account: "",
        password: "",
        chpass: "",
        age: "",
        sex: "",
        phone: "",
        curriculum: "",
        key: "",
      },
      key_placeholder: "请输入验证码",
      button_type: true,
      rules: {
        name: [
          {
            required: true,
            min: 6,
            max: 20,
            message: "用户名长度6-20字符",
            trigger: "change",
          },
        ],
        account: [{ validator: validateAccount, trigger: "change" }],
        password: [{ validator: validatePass, trigger: "change" }],
        chpass: [{ validator: validatePass2, trigger: "change" }],
        phone: [{ validator: validatePhone, trigger: "change" }],
        key: [{ validator: validateKey, trigger: "change" }],
      },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 15 },
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          teacherRegister(this.ruleForm).then(res => {
            console.log(res);
          })
        } else {
          return false;
        }
      });
    },

    // 点击获取验证码会有倒计时，并且不能点击按钮
    daojishi() {
      var count = 5; //倒计时时间
      this.button_type = false; //按钮不可点击
      this.key_placeholder = count + "s后可重试"; //显示倒计时文案
      var times = setInterval(() => {
        this.key_placeholder = --count + "s后可重试"; //递减
        if (count <= -1) {
          // <=0 变成获取按钮
          this.key_placeholder = "请重新获取验证码";
          this.button_type = true;
          clearInterval(times);
        }
      }, 1000); //1000毫秒后执行
    },
  },
};
</script>
<style>
.box {
  width: 50%;
  margin: 0 auto;
}
#login_button:hover {
  background-color: rgb(82, 82, 218);
}
</style>